<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUserList, createUser } from '@/api/apis'

// 示例：请求用户列表
// async function fetchUserList() {
//   const res = await post('/user/list', { page: 1, size: 10 })
//   userList.value = res.data
// }
// 示例：删除用户
// async function deleteUserApi(id) {
//   await post(`/user/delete`, { id })
// }

// mock 用户数据
const allUsers = [
  { id: 1, username: 'admin', role: '管理员', status: '启用' },
  { id: 2, username: 'doctor1', role: '医生', status: '启用' },
  { id: 3, username: 'nurse1', role: '护士', status: '禁用' },
  { id: 4, username: 'user1', role: '普通用户', status: '启用' },
  { id: 5, username: 'user2', role: '普通用户', status: '禁用' }
]
const search = ref('')
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(allUsers.length)
const userList = ref([...allUsers])

function handleSearch() {
  if (!search.value) {
    userList.value = [...allUsers]
  } else {
    userList.value = allUsers.filter(u => u.username.includes(search.value))
  }
  total.value = userList.value.length
  currentPage.value = 1
}

function handleEdit(row) {
  ElMessage.info('编辑功能可在创建用户页体验')
}
function handleDelete(row) {
  ElMessageBox.confirm('确定要删除该用户吗？', '提示', { type: 'warning' })
    .then(() => {
      userList.value = userList.value.filter(u => u.id !== row.id)
      total.value = userList.value.length
      ElMessage.success('删除成功')
    })
}

function handlePageChange(page) {
  currentPage.value = page
}

const pagedUsers = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return userList.value.slice(start, start + pageSize.value)
})
</script>

<template>
  <div class="container">
    <el-card shadow="never" class="user-card no-border">
      <div class="user-header">
        <span class="user-title">用户列表</span>
        <el-input v-model="search" placeholder="搜索用户名" clearable style="width: 200px" @input="handleSearch" />
      </div>
      <el-table :data="pagedUsers" style="width: 100%; margin-top: 16px;" class="no-table-border"  :header-cell-style="{ background: '#f5f7fa', color: '#606266'}">
        <el-table-column prop="username" label="用户名" min-width="120" />
        <el-table-column prop="role" label="角色" min-width="100" />
        <el-table-column prop="status" label="状态" min-width="80" />
        <el-table-column label="操作" min-width="120">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 16px; text-align: right;justify-content: flex-end;"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </el-card>
  </div>
</template>

<style scoped>
.user-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-title {
  font-size: 20px;
  font-weight: bold;
}
.no-border {
  border: none !important;
  box-shadow: none !important;
}
.no-table-border .el-table__inner-wrapper,
.no-table-border .el-table__body,
.no-table-border .el-table__header {
  border: none !important;
}
.no-table-border .el-table__cell {
  border-bottom: none !important;
}
</style> 